延續上一篇的連接 mysql 實現 crud 的操作,本篇將介紹新增資料的操作。之後的兩篇文,將會介紹更新、刪除的操作。首先我們在上一篇已經有將資料列出來,在此做一些畫面的調整,使用 bootstrap 的前端框架套件去使用。
本章節主要使用的套件有:
express web framework
mysql
jade
先看一下首頁的佈局,在表格的上面有一個新增使用者的按鈕,預備進到新增的頁面去建立資料,其下方一點的表格,則是列出使用者的列表,預定先寫好每一筆資料的功能,包含更新、刪除,而這兩個功能將在後續的兩章節分別實作
建立資料庫連線的方式,也務必要建立如下:
var mysql = require('mysql');
var pool = mysql.createPool({
host : 'localhost',
user : 'nodejs',
password : 'nodejs',
database : 'demo_nodejs'
});
我們在本篇只專注於『新增使用者』這個按鈕,而這點選之後會引導到新增的頁面。因此在 app.js 的部分加入:
app.get('/create', function(req, res){
res.render('create', {
title: '建立新的使用者'
});
});
app.post('/create', function(req, res){
pool.getConnection(function(err, connection){
connection.query('insert into users set ?', {
id: req.body.user.id,
name: req.body.user.name,
description: req.body.user.description
}, function(err, fields){
if (err)
throw err;
});
//新增完成後,查詢目前所有使用者
connection.query('select * from users', function(err, rows, field){
if (err)
throw err;
//將資料傳送到首頁的使用者列表
res.render('user', {
title: '使用者列表',
user: rows
});
});
connection.release();
});
});
在這邊建立兩個 get, post 的方法,我們預計點選按鈕的時候網址指定為 /create ,因此在 『新增使用者』的這個按鈕語法為:
a(href='/create', class='btn btn-primary') 新增使用者
而 app.post 方法的那部分則需要在表單送出的時候 直接將表單提交出去,做 insert 的動作,insert 的參數在第一個參數位置就寫問號,第二參數則使用json 格式的方式做 key/value 的資料,也就是這部分,主要表單傳送出來的資料,用 req.body.user.[欄位],如下:
connection.query('insert into users set ?', {
id: req.body.user.id,
name: req.body.user.name,
description: req.body.user.description
}, function(err, fields){
if (err)
throw err;
});
接著建立 view 的部分,在 /views 建立 create.jade
顯示的部分
就以新增資料之後,再退回到前面列表的頁面,程式的部分將會在 insert 完成後,再執行:
//新增完成後,查詢目前所有使用者
connection.query('select * from users', function(err, rows, field){
if (err)
throw err;
//將資料傳送到首頁的使用者列表
res.render('user', {
title: '使用者列表',
user: rows
});
});
這樣將會引導使用者到前頁顯示使用者列表,結果如下,紅色框則是新增的資料